<script setup lang="ts">
import { UserInterface } from '@renderer/types/user.interface'
import { FormInst, FormRules } from 'naive-ui'
import { ref } from 'vue'
import { requestPost } from '../utils/commonRequest'
import TitleBar from './../components/TitleBar.vue'
interface ModelType {
  eMail: string | null
  password: string | null
}
const formRef = ref<FormInst | null>(null)
const model = ref<ModelType>({
  eMail: null,
  password: null
})

const rules: FormRules = {
  eMail: [
    {
      required: true,
      message: '请输入邮箱'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ]
}

const submitClick = (): void => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const data = await requestPost<UserInterface>('/login', model.value)
      if (!data) return
      localStorage.setItem('userInfo', JSON.stringify(data))
      window.api.showHomeWindow()
    } else {
      window.$message.error('验证失败')
    }
  })
}
</script>

<template>
  <div class="login">
    <TitleBar head-title="聊天工具" :show-max="false" font-color="#fff"></TitleBar>
    <div class="box">
      <n-avatar
        :size="48"
        src="https://pic.netbian.com/uploads/allimg/230127/001928-167474996865a1.jpg"
      />
      <n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
        <n-form-item path="eMail" label="">
          <n-input v-model:value="model.eMail" placeholder="请输入邮箱" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="">
          <n-input
            v-model:value="model.password"
            type="password"
            placeholder="请输入密码"
            show-password-on="mousedown"
            @keydown.enter.prevent
          />
        </n-form-item>
      </n-form>
      <n-button type="primary" @click="submitClick"> 登录 </n-button>
    </div>
  </div>
</template>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #2f3241;
}
.box {
  flex: 1;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;

  .n-avatar {
    margin-bottom: 20px;
    overflow: hidden;
    -webkit-app-region: no-drag;
    img {
      object-fit: cover;
    }
  }
  .n-form {
    width: 70%;
    margin: 20px 0;
    -webkit-app-region: no-drag;
  }
  .n-button {
    width: 70%;
    margin: 20px;
    -webkit-app-region: no-drag;
  }
}
</style>
